<template>
  <div>
    <el-drawer
      @open="openEvent"
      :withHeader="false"
      :destroy-on-close="true"
      title="分配"
      @close="() => this.$emit('fatherMethod')"
      :visible.sync="drawer"
      direction="rtl"
    >
      <div style="overflow: scroll; height: 100%">
        <el-tree
          ref="treeRef"
          :data="allPermission"
          :props="defaultProps"
          node-key="id"
          show-checkbox
          :default-checked-keys="defKeys"
          default-expand-all
          @check-change="handleNodeChange"
        ></el-tree>
        <div style="padding: 20px 10px; overflow: hidden">
          <el-button
            style="float: right; margin: 0 20px"
            type="primary"
            @click="setPermission()"
            >分配</el-button
          >
          <el-button
            style="float: right"
            @click="() => this.$emit('fatherMethod')"
            >取消</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {editRole} from '../../../Api/rightsmanage/index'
import { getPermissionByRole } from "../../../Api/rightsmanage/permission";
export default {
  props: {
    drawerVisible: {
      type: Boolean,
      default: false,
    },
    editObj: {
      type: Object,
    },
  },
  data() {
    return {
      drawer: false,
      permissionList: [],
      defaultProps: {
        label: "remarks",
        children: "childPermission",
      },
      defKeys: [],
    };
  },
  watch: {
    drawerVisible: function (newVal) {
      this.drawer = newVal;
    },
  },
  computed: {
    //获取所有权限
    ...mapState({
      allPermission: (state) => state.roleInfo.allPermission,
    }),
  },
  methods: {
    async openEvent() {
      console.log(this.allPermission);
      const { data: res } = await getPermissionByRole(this.editObj.id);
      console.log(res);
      if (res.statusCode === 20000) {
        this.permissionList = res.data;
        this.getIdList(this.permissionList);
        this.loading = false;
      }
    },
    //将三级权限上的ID提供给defKeys 数组
    getIdList(node) {
      let tem = [""];
      node.forEach((one) => {
        if (one.childPermission.length !== 0) {
          one.childPermission.forEach((two) => {
            if (two.childPermission.length !== 0) {
              two.childPermission.forEach((three) => {
                tem.push(three.id);
              });
            } else {
              tem.push(two.id);
            }
          });
        } else {
          tem.push(one.id);
        }
      });
      this.defKeys = [...tem];
    },
    handleNodeChange() {},
    async setPermission() {
        const keys = [
            ...this.$refs.treeRef.getCheckedKeys(),
            ...this.$refs.treeRef.getHalfCheckedKeys()
        ];
        this.editObj.permissionIds = keys;
        console.log(this.editObj);
        const {data : res} = await editRole(this.editObj);
        console.log(res);
        if(res.statusCode === 20000){
            this.$message.success('重新分配角色成功');
        }
        this.$emit('fatherMethod');
    },
  },
};
</script>

<style lang="scss" scoped>
>>> .el-drawer__body {
  overflow: auto;
}
</style>